<template>
  <div class="total-detail-list">
    <Title title="统计详情" font-size="16px" style="margin-bottom: 24px" />
    <el-table
      :data="detailList.items"
      :header-cell-style="{color: '#141C3D', fontSize: '14px'}"
      fit
      max-height="340"
      style="font-size: 14px;color: #999">
      <el-table-column align="center" label="下单日期">
        <template slot-scope="scope">
          <span class="text">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="询单号">
        <template slot-scope="scope">
          <span class="text">{{ scope.row.orderNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已响应数量">
        <template slot-scope="scope">
          <span class="text">{{ scope.row.responseNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已完成数量">
        <template slot-scope="scope">
          <span class="text">{{ scope.row.completeNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单笔成单率">
        <template slot-scope="scope">
          <div class="text">
            {{ scope.row.completePercent || scope.row.completePercent === 0 ? scope.row.completePercent.toFixed(1) + '%' : '--' }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-show="detailList.total > 0"
        :current-page.sync="detailList.page"
        :page-size="detailList.perPage"
        :total="detailList.total"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>
<script>
import Title from '@/components/Title';
export default {
  name: 'TotalDetailList',
  components: { Title },
  props: {
    detailList: {
      type: Object,
      default: () => {
        return false;
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    time: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleCurrentChange(toPage) {
      this.$emit('currentPage', toPage);
    }
  }
};
</script>
<style lang="scss" scoped>
.pagination-area {
  justify-content: center;
  & ::v-deep {
    .el-input__inner {
      width: 100%;
    }
    .el-pagination {
      padding: 18px 0 0 !important;
    }
  }
}
.total-detail-list {
  .list-title {
    padding: 0 0 30px 0;
    color: #333;
    font-size: 20px;
    &::before {
      top: -1px;
    }
  }
  .text {
    font-size: 15px;
  }
}

</style>
